<script setup>
import { UserFilled, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {reactive, ref} from "vue";
import xx from "@/axios/xx";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
import {encrypt} from "@/utils/rsaEncrypt";
const info = reactive({
  url: xx.defaults.baseURL+'verifyCode',
  form: {
    username:'',
    password:'',
    verifyCode:'',
    userType:'',
  },
  checked: '',
  user: {}
})

const router = useRouter();
const rules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  verifyCode: [{ required: true, trigger: "blur", message: "请输入验证码" }],
  userType: [{ required: true,message: "请选择用户类型" }],
};


const ruleFormRef = ref({});

const login = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      //根据info.form.userType中的值：user或admin来判断跳转路由
      if(info.form.userType === "user"){
        xx.post("userInfo/checkLogin",{
          verifyCode:info.form.verifyCode,
          username:info.form.username,
          password:encrypt(info.form.password),
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            ElMessage({
              message: res.message,
              type: 'success'
            })
            sessionStorage.setItem("user",JSON.stringify(res.data))
            // 记住密码
            if(info.checked) {
              localStorage.setItem("USER_LOGININFO_KEY", info.form.username);
              localStorage.setItem("USER_LOGININFO_VALUE", info.form.password);
            }
            else {
              localStorage.removeItem("USER_LOGININFO_KEY");
              localStorage.removeItem("USER_LOGININFO_VALUE");
            }
            router.push("/user_Layout/homeUser")
          } else {
            ElMessage.error(res.message)
          }})
      }
      else {

        xx.post("adminInfo/checkLogin",{
          verifyCode:info.form.verifyCode,
          username:info.form.username,
          password:encrypt(info.form.password),
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            ElMessage({
              message: res.message,
              type: 'success'
            })
            sessionStorage.setItem("admin",JSON.stringify(res.data))
            // 记住密码
            if(info.checked) {
              localStorage.setItem("ADMIN_LOGININFO_KEY", info.form.username);
              localStorage.setItem("ADMIN_LOGININFO_VALUE", info.form.password);
            }
            else {
              localStorage.removeItem("ADMIN_LOGININFO_KEY");
              localStorage.removeItem("ADMIN_LOGININFO_VALUE");
            }
            router.push("/admin_Layout2/home")
          } else {
            ElMessage.error(res.message)
          }})
      }
    } else {
      return false;
    }
  });
}
const checkedRemember = ()=>{
  if(localStorage.getItem("ADMIN_LOGININFO_KEY")!==null&&localStorage.getItem("ADMIN_LOGININFO_VALUE")!==null){
    info.form.username = localStorage.getItem("ADMIN_LOGININFO_KEY")
    info.form.password = localStorage.getItem("ADMIN_LOGININFO_VALUE")
    info.form.userType = "admin"
  }
  else if(localStorage.getItem("USER_LOGININFO_KEY")!==null&&localStorage.getItem("USER_LOGININFO_VALUE")!==null){
    info.form.username = localStorage.getItem("USER_LOGININFO_KEY")
    info.form.password = localStorage.getItem("USER_LOGININFO_VALUE")
    info.form.userType = "user"
  }
}
checkedRemember()
/* 调试用（无需验证）
const login = (formEl) => {
  // 直接跳转逻辑
  const userType = info.form.userType; // 假设 userType 存在 info.form 中
  sessionStorage.setItem("user", JSON.stringify({
    username: info.form.username,
    userType: userType
  }));
}*/



const change = () => {
  info.url = xx.defaults.baseURL+'verifyCode?'+Math.random()
}
</script>

<template>
  <div class="main">
    <div class="title">MicroLoan - 微贷平台</div>
    <div class="lg">
      <div class="ipt">
        <br><br>
        <div class="ipt-1">
          <el-form :model="info.form" ref="ruleFormRef" :rules="rules" label-width="auto" style="max-width: 400px">
            <el-form-item prop="username">
              <el-input v-model="info.form.username" style="height: 40px" placeholder="用户名" :prefix-icon="UserFilled" />
            </el-form-item>
            <el-form-item  prop="password">
              <el-input type="password" v-model="info.form.password" style="height: 40px" placeholder="密码" :prefix-icon="Lock" />
            </el-form-item>
            <el-form-item  prop="verifyCode">
              <el-input v-model="info.form.verifyCode" style="width: 150px;height: 40px" placeholder="验证码" />
              <img :src="info.url" @click="change" style="margin-left: 15px" alt="验证码">
            </el-form-item>

            <el-row>
              &nbsp;&nbsp;
              <el-form-item prop="userType">
                <el-radio-group v-model="info.form.userType" style="">
                  <el-radio value="user" style="color: black">user</el-radio>
                  <el-radio value="admin" style="color: black">admin</el-radio>
                </el-radio-group>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item>
                <el-checkbox label="记住密码"  v-model="info.checked" style="color: black">
                  记住此密码
                </el-checkbox>
              </el-form-item>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="login(ruleFormRef)" class="login-button">登录</el-button>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="loginAsAdmin(ruleFormRef)" class="login-button">管理员登录</el-button>-->
<!--            </el-form-item>-->
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  background: url("@/assets/imges/背景.jpg");
  background-size: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 标题样式类 */
.title {
  /*实现文字颜色从红到黄的线性渐变效果*/
    background: linear-gradient(to  bottom right, #0e032a, #ffffff); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;/*给文字设置成透明*/

  /* 设置字体大小为50像素，以突出标题的重要性 */
  font-size: 50px; /* 增大字体 */

  /* 加粗字体，增强视觉效果 */
  font-weight: bold;

  /* 文本居中，以实现更好的布局对齐 */
  text-align: center;

  position: fixed;
  top: 70px; /* 固定在顶部 */
  left: 50%;
  transform: translateX(-50%);
}

.lg {
  width: 400px; /* 调整登录框宽度 */
  height: 400px; /* 调整登录框高度 */
  position: absolute;
  left: 50%; /* 使用左侧50%定位 */
  top: 50%; /* 使用顶部50%定位 */
  transform: translate(-50%, -50%); /* 使用transform来居中 */
}

.ipt {
  height: 100%; /* 设置输入区域的高度为登录框高度 */
  background: linear-gradient(to bottom, #3a7cd7, #dbe5ee);
  border-radius: 10px;
  padding: 20px; /* 增加内边距 */
}

.ipt-1 {
  width: 100%; /* 设置输入区域的宽度 */
  margin: 0 auto;
}

.login-button {
  width: 100%;
  height: 40px;
  background-color: #1E3A8A; /* 深蓝色 */
  border-color: #1E3A8A; /* 深蓝色 */
  margin-top: 10px; /* 增加按钮之间的间距 */
}
</style>
